import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    meta: {
      title: "登录",
    },
    component: () => import("../view/login.vue"),
  },
  {
    path: "/home",
    name: "主页",
    meta: {
      title: "主页",
    },
    component: () => import("../view/home.vue"),
    redirect: "/index",
    children: [
      {
        path: "/index",
        name: "index",
        meta: {
          title: "首页",
        },
        component: () => import("../view/welcome.vue"),
      },
    ],
  },
];
const router = createRouter({
  // history: createWebHashHistory(),  // hash模式
  history: createWebHistory(), // history模式
  routes,
});

// 挂载路由导航守卫：to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to, from, next) => {
  // 修改页面 title
  if (to.meta.title) {
    document.title = "知否技术 - " + to.meta.title;
  }
  // 放行登录页面
  if (to.path === "/login") {
    return next();
  } else {
    const menuList = JSON.parse(sessionStorage.getItem("menuList"));
    const menus = filterRouter(menuList);
    menus.forEach((route) => {
      router.addRoute(route);
    });
    return next();
  }
});

const filterRouter = (menuList) => {
  // import.meta.glob 作用是 Vite 特有的功能,它允许你在模块内部匹配多个模块,基于文件系统的模式
  const modules = import.meta.glob("../view/**/*.vue");
  // 遍历菜单数据
  for (let index = 0; index < menuList.length; index++) {
    // 获取父菜单
    const e = menuList[index];
    // 因为我们在 home 页面的 el-main 设置了 router-view ，所以这里父级菜单默认指向 home页面
    e.component = modules["../view/home.vue"];
    // 遍历子菜单，
    for (let index = 0; index < e.children.length; index++) {
      const item = e.children[index];
      // 导入组件
      item.component = modules[`../view/${item.component}.vue`];
    }
  }
  return menuList;
};
// 导出路由
export default router;
